<!--左侧导航栏-->
<template>
    <div class="page-container">
        <el-menu default-active="2" class="el-menu-vertical-demo">
            <menu-tree v-for="(item,index) in menuTree[0].children" :key="index" :menu="item"></menu-tree>
        </el-menu>
        <!--<el-menu-->
        <!--default-active="2"-->
        <!--class="el-menu-vertical-demo">-->
        <!--<el-submenu index="1">-->
        <!--<template slot="title">-->
        <!--<i class="el-icon-location"></i>-->
        <!--<span>导航一</span>-->
        <!--</template>-->
        <!--<el-menu-item-group>-->
        <!--<template slot="title">分组一</template>-->
        <!--<el-menu-item index="1-1">选项1</el-menu-item>-->
        <!--<el-menu-item index="1-2">选项2</el-menu-item>-->
        <!--</el-menu-item-group>-->
        <!--<el-menu-item-group title="分组2">-->
        <!--<el-menu-item index="1-3">选项3</el-menu-item>-->
        <!--</el-menu-item-group>-->
        <!--<el-submenu index="1-4">-->
        <!--<template slot="title">选项4</template>-->
        <!--<el-menu-item index="1-4-1">选项1</el-menu-item>-->
        <!--</el-submenu>-->
        <!--</el-submenu>-->
        <!--<el-menu-item index="2">-->
        <!--<i class="el-icon-menu"></i>-->
        <!--<span slot="title">Reading Book</span>-->
        <!--</el-menu-item>-->
        <!--<el-menu-item index="3">-->
        <!--<i class="el-icon-document"></i>-->
        <!--<span slot="title">音乐页面</span>-->
        <!--</el-menu-item>-->
        <!--<el-menu-item index="4">-->
        <!--<i class="el-icon-setting"></i>-->
        <!--<span slot="title">用户设置</span>-->
        <!--</el-menu-item>-->
        <!--</el-menu>-->
    </div>
</template>

<script>
    import MenuTree from "./MenuTree";

    export default {
        name: "NavMenuLeft",
        components: {MenuTree},
        data() {
            return {
                menuTree: [{
                    "id": 1,
                    "menu_name": "gen",
                    "parent_id": 0,
                    "children": [{
                        "menu_id": "1",
                        "parent_id": 1,
                        "id": 2,
                        "menu_name": "首页",
                        "icon": "el-icon-s-home",
                        "url": "/",
                        "children": [],
                    }, {
                        "menu_id": "2",
                        "parent_id": 1,
                        "id": 3,
                        "menu_name": "个人中心",
                        "icon": "el-icon-user-solid",
                        "children": [{
                            "menu_id": "2-1",
                            "parent_id": 3,
                            "id": 7,
                            "menu_name": "照片墙",
                            "icon": "el-icon-picture",
                            "url": "/PhotoWall",
                            "children": []
                        }, {
                            "menu_id": "2-2",
                            "parent_id": 3,
                            "id": 8,
                            "menu_name": "文章记录",
                            "icon": "el-icon-document",
                            "url": "/",
                            "children": []
                        }]
                    }, {
                        "menu_id": "3",
                        "parent_id": 1,
                        "id": 4,
                        "menu_name": "Reading Book",
                        "icon": "el-icon-reading",
                        "url": "/ReadingBook",
                        "children": []
                    }, {
                        "menu_id": "4",
                        "parent_id": 1,
                        "id": 5,
                        "menu_name": "音乐页面",
                        "icon": "el-icon-headset",
                        "url": "/ListenMusic",
                        "children": []
                    }, {
                        "menu_id": "5",
                        "parent_id": 1,
                        "id": 6,
                        "menu_name": "用户设置",
                        "icon": "el-icon-setting",
                        "children": [],
                        "url": "/UserSettings",
                        "subUrl": "/PersonalCenter"
                    }]
                }]
            }
        }
    }
</script>

<style scoped lang="scss">
    .page-container {
        width: 100%;
        height: 100%;
    }
</style>